<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #main {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        /* width: 500px;
        height: 500px; */
    }

    form {
        width: 300px;
        height: 300px;
        border: 5px dashed pink;
        border-radius: 5px;
        text-align: center;
    }

    input {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    input[type='radio']{
        margin-left: 15px;
    }
    select{
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .form-item {
        outline: none;
    }

    .form-item::after {
        content: attr(data-msg);
        color: red;
        font-size: 10px;
        display: none;
    }

    .form-item.err::after {
        display: block;
    }
    .sub{
        width: 200px;
        height: 30px;

    }
</style>

<body>
    <!-- 用v-model 写一个表单,要有用户名，密码，性别，选择专业（下拉框），加验证（用户名必须三个字符以上，密码必须有大小写加数字，其它选项不能为空） -->
    <div id="main">
        <form action="#" v-on:submit='submit' onsubmit="return false">
            <label :class="['form-item', {'err':err1}]" data-msg="用户名必须三个字符以上">
                用户名：<input type="text" class="input" name="username" v-model="username">
                <br>
            </label>
            <br>
            <label :class="['form-item', {'err':err2}]" data-msg="由数字字母组成，6-16位">
                密码：<input type="password" class="input" name="password" v-model="password">
                <br>
            </label>
            <br>
            <label for="" class="input">
                性别：女<input type="radio" name="sex" v-model="sex">
                男<input type="radio" name="sex" v-model="sex">
            </label>
            <br>
            <label for="" >
                选择专业：
                <select name="select" v-model="select" class="input">
                    <option value="nurse">护理</option>
                    <option value="teacher">教育</option>
                </select>
            </label>
            <br>
            <label for=""><input type="submit" value="提交" class="sub"></label>
        </form>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#main',
        data: {
            username: '',
            err1: false,
            err2: false,
            password: '',
            sex: '',
            select: ''
        },
        watch: {
            username(value) {
                this.err1 = !/^\w{4,}$/.test(value);
                console.log(this.err1);
            },
            password(value) {
                this.err2 = !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,8}$/.test(value);
                console.log(this.err2);
            },
            sex(value) {
                this.errsex = false
            }
        },
        methods: {
            submit: function () {
                if (this.sex != '' && this.select != '') {
                    alert('success')
                } else {
                    alert('请确保信息填写完整')
                }
            }
        }
    })
</script>

</html>